<template>
  <view class="FreeOpenAnswerToast" v-if="show">您可以试看5次试题详解，剩余<text style="color: red">{{ count }}</text>次</view>
</template>
<script>
export default {
  name: "FreeOpenAnswerToast",
  data() {
    return {
      count: 5,
      show: false
    }
  },
  created() {
    uni.$on('showFreeToast', this.onMessage)
  },
  destroyed() {
    uni.$off('showFreeToast', this.onMessage)
    clearTimeout(this._h)
  },
  methods: {
    onMessage({type, count}) {
      this.count = count
      this.show = true
      this._h = setTimeout(() => {
        this.show = false
      }, 2500)
    }
  }
}
</script>
<style scoped lang="scss">
.FreeOpenAnswerToast {
  position: fixed;
  bottom: 160rpx;
  left: 30rpx;
  right: 30rpx;
  background-color: #303030;
  color: #fff;
  padding: 25rpx;
  font-size: 16px;
  border-radius: 5rpx;
  text-align: center;
}
</style>